import React, { useEffect, useState } from 'react';
import { Button, Space, Swiper, Toast } from 'antd-mobile';
import { SwiperRef } from 'antd-mobile/es/components/swiper';
import styles from '../wsy/styles/myhome.module.css';
import { LocationFill, ShopbagOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';
import axios from 'axios'
import { CarryOutOutlined} from '@ant-design/icons'
import {RightOutlined} from '@ant-design/icons';
// import Tu from '/public/img/u277.png'

// 图片链接数组
const images = [
  'https://img1.baidu.com/it/u=2001949382,390148491&fm=253&fmt=auto&app=120&f=JPEG?w=1199&h=800',
  'https://img0.baidu.com/it/u=3644432007,100351406&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=600',
  'https://cdn8.axureshop.com/demo2024/764739/images/1_1%E9%A6%96%E9%A1%B5/u227.png',
  'https://img2.baidu.com/it/u=1614213047,2287456579&fm=253&fmt=auto&app=138&f=JPEG?w=853&h=500'
];

// 生成 Swiper.Item 数组
const items = images.map((image, index) => (
  <Swiper.Item key={index}>
    <div
      className={styles.content}
      style={{
        // 设置背景图片
        backgroundImage: `url(${image})`,
        // 让背景图片覆盖整个容器
        backgroundSize: 'cover',
        // 背景图片居中显示
        backgroundPosition: 'center',
        // 防止背景图片重复
        backgroundRepeat: 'no-repeat'
      }}
      onClick={() => {
        Toast.show(`你点击了卡片 ${index + 1}`);
      }}
    >
      {/* {index + 1} */}
    </div>
  </Swiper.Item>
));

const Show: React.FC = () => {
  // const ref = useRef<SwiperRef>(null);
  // 模拟预订信息
  const bookingInfo = [
    { id: 1, name: '朱**7秒前预订了三亚市的小红酒店' },
    { id: 2, name: '马**5秒前预订了海珠市的小红酒店' },
    { id: 3, name: '刘**3秒前预订了深圳市的小红酒店' },
  ]
  const navigate=useNavigate()
  // 风景
  const locations = [
  {
    name: '桂林',
    description: '桂林山水俯瞰秀美的水墨画，在这里可以泛舟江上或漫步古街，或选择一处隐匿于山水间的网红酒店，享受静谧的美景。',
    likes: '16万',
    img: 'https://img0.baidu.com/it/u=2929331763,2408110470&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500'
  },
  {
    name: '无锡',
    description: '太湖水面如丝网般泛波，湖上泛好茶，看看窗外的美景，您的心享受一下沉淀，也不失一种悠闲。',
    likes: '23万',
    img: 'https://img2.baidu.com/it/u=2510177431,4005408806&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500'
  },
  {
    name: '成都',
    description: '成都是美丽的慢城，大饱眼福的乡村，也是吃货的天地。在成都你尽享逛街、喝茶、吃美食。',
    likes: '16万',
    img: 'https://img2.baidu.com/it/u=1181285108,2140977642&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1740675600&t=8e86f6cc91e8449bbd6397193b96e574'
  }
];
  return (
    <div>
      <Swiper
        loop
        autoplay
        onIndexChange={(i) => {
          // console.log(i, 'onIndexChange1');
        }}
      >
        {items}
      </Swiper>


      <div className={styles.bod}>
        {/* 地点与时间 */}
        <div className={styles.ok}>
          <div className={styles.container}>
            {/* 导航栏 */}
            <div className={styles.nav}>
              <div className={`${styles.navItem} ${styles.active}`}>酒店</div>
              <div className={styles.navItem}>时租</div>
              <div className={styles.navItem}>国际</div>
              <div className={styles.navItem}>特惠</div>
            </div>

            {/* 搜索区域 */}
            <div className={styles.searchArea}>
              <div className={styles.inputWrapper}>
                <input type="text" placeholder="深圳市高新科技园" style={{border:'none'}}/>
                <button>最近</button>
                <RightOutlined />
              </div>
              <div className={styles.datePicker} onClick={()=>navigate('/time')}>
               
                <span>今天入住</span>
                <span>4月12日</span>
                <span>1晚</span>
                <span>明天离店</span>
                <span>4月13日</span>
                <span><RightOutlined /></span>
              </div>
              <button className={styles.queryButton} onClick={()=>navigate('/search')}>查询酒店</button>
            </div>
            {/* 预订信息展示 */}
            <div className={styles.bookingInfo}>
              <div className={styles.scrollContainer}>
                {bookingInfo.map((item,index) => (
                  <span key={item.id}  className={`${styles.scrollText} ${index === 0? styles.currentItem : ''}`}>
                    {item.name}
                  </span>
                ))}
              </div>
            </div>

            {/* 底部导航栏 */}
            <div className={styles.bottomNav}>
              <div className={styles.bottomNavItem} onClick={()=>navigate('/search')}>
              <LocationFill />
                <span>附近酒店</span>
              </div>
              <div className={styles.bottomNavItem} onClick={()=>navigate('/search')}>
                {/* <Tu/> */}
                <span>新店推荐</span>
              </div>
              <div className={styles.bottomNavItem}>
              <ShopbagOutline />
                <span>积分商城</span>
              </div>
              <div className={styles.bottomNavItem}>
              <CarryOutOutlined />
                <span>签到</span>
              </div>
            </div>
            <div style={{ marginTop: 10, textAlign: 'center' }}>
              <p>网红目的地</p>
              <div className={styles.lists}>
                {locations.map((item,index)=>{
                  return(
                    <div className={styles.li}>
                      <img src={item.img} alt="" />
                    </div>
                  )
                })}
              </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Show;